<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:c="http://java.sun.com/jsp/jstl/core"     
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui">
<h:head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login Form</title>

<link href="resources/css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!--Slider-in icons-->
<script type="text/javascript">
$(document).ready(function() {
	$(".username").focus(function() {
		$(".user-icon").css("left","-48px");
	});
	$(".username").blur(function() {
		$(".user-icon").css("left","0px");
	});
	
	$(".password").focus(function() {
		$(".pass-icon").css("left","-48px");
	});
	$(".password").blur(function() {
		$(".pass-icon").css("left","0px");
	});
});
</script>

</h:head>
<body>

<!--WRAPPER-->
<div id="wrapper">

	<!--SLIDE-IN ICONS-->
    <div class="user-icon"></div>
    <div class="pass-icon"></div>
    <!--END SLIDE-IN ICONS-->

<!--LOGIN FORM-->
<h:form id="formLogin" prependId="false" class="login-form">

	<!--HEADER-->
    <div class="header">
    <!--TITLE--><h1>Ingresar</h1><!--END TITLE-->
    <!--DESCRIPTION--><span>Ingrese usuario y clave para acceder al panel de control</span><!--END DESCRIPTION-->
    </div>
    <!--END HEADER-->
	
	<!--CONTENT-->
    <div class="content">

	<!--USERNAME--><h:inputText name="username" id="j_username" value="#{loginBean.userName}"  required="true" class="input username" onfocus="this.value=''" /><!--END USERNAME-->
    <!--PASSWORD--><h:inputSecret name="password" type="password" value="#{loginBean.password}" required="true"  class="input password" onfocus="this.value=''" /><!--END PASSWORD-->
    </div>
    <!--END CONTENT-->
    
    <!--FOOTER-->
    <div class="footer">
    					<p:commandButton   type="submit" id="login"   action="#{loginBean.login}" value="Entrar" styleClass="button" />
    <!--REGISTER BUTTON--><!-- input type="submit" name="submit" value="Nuevo" class="register" /--><!--END REGISTER BUTTON-->
    </div>
    <!--END FOOTER-->

</h:form>
<!--END LOGIN FORM-->

</div>
<!--END WRAPPER-->

<!--GRADIENT--><div class="gradient"></div><!--END GRADIENT-->

</body>
</html>
